<template>
  <div class="dashboard">
    <div class="dashboard-overview">
      <div class="dashboard-overview-item" v-for="(ow, idx) in overviews" :key="`dashboard-overview-${idx}`">
        <div class="dashboard-overview-item__header">
          <div class="dashboard-overview-item__title">{{ ow.title }}</div>
          <div class="dashboard-overview-item__tag" :style="{ background: ow.color }">
            {{ ow.tag }}
          </div>
        </div>
        <div class="dashboard-overview-item__body">
          <h1 class="dashboard-overview-item__value">{{ ow.value }}</h1>
        </div>
        <div class="dashboard-overview-item__footer">
          <small class="dashboard-overview-item__tip">{{ ow.tip }}</small>
          <div class="dashboard-overview-item__other" :style="{ color: ow.color }">
            {{ ow.other }}
          </div>
        </div>
      </div>
    </div>

    <div class="dashboard-tables">
      <div class="dashboard-table-item">
        <el-card>
          <div class="dashboard-table-item__title" slot="header">
            即将到期的材料
          </div>
          <div class="dashboard-table-item__data">
            <el-table :data="expiredMaterials" size="mini" stripe>
              <el-table-column label="客户ID" prop="client_id" />
              <el-table-column label="证书类型" prop="title" />
              <el-table-column label="到期类型" prop="expire_type" />
              <el-table-column label="到期时间" prop="expire_date" />
              <el-table-column label="剩余天数" prop="days_to_expire" />
              <el-table-column>
                <template slot-scope="{row}">
                  <el-button size="mini" type="text" @click="toMaterialDetail(row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="dashboard-table-item">
        <el-card>
          <div class="dashboard-table-item__title" slot="header">待办事项</div>
          <div class="dashboard-table-item__data">
            <el-table :data="todoList" size="mini" stripe>
              <el-table-column label="待办ID" prop="id" />
              <el-table-column label="主流程ID" prop="p_id" />
              <el-table-column label="待办类型" prop="todo_type_text" />
              <el-table-column label="待办开始时间" prop="start_time" />
              <el-table-column label="流程状态" prop="status_text" />
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="js">
import { DashboardApi } from '@/api';

export default {
  data() {
    return {
      overviews: [
        {
          title: '客户数',
          tag: '当前',
          color: '#4082C1',
          value: '-',
          tip: '你的客户数',
          other: '-',
        },
        {
          title: '企业客户数',
          tag: '当前',
          color: '#5FC3C6',
          value: '-',
          tip: '你的企业客户数',
          other: '-',
        },
        {
          title: '即将到期',
          tag: '当前',
          color: '#54B095',
          value: '-',
          tip: '你名下客户挂靠信息即将到期',
          // other: '32%',
        },
        {
          title: '我的待办',
          tag: '当前',
          color: '#DC6068',
          value: '-',
          tip: '您待处理的流程',
          // other: '32%',
        },
      ],
      // 待办列表
      todoList: [],
      // 即将到期的材料
      expiredMaterials: [],
      company: {
        count: 0
      },
      client: {
        count: 0
      }
    };
  },
  created() {
    this.fetchDashboardData();
  },
  methods: {
    async fetchDashboardData() {
      try {
        const response = await DashboardApi.getDashboardData();
        // 待办
        this.todoList = response.result.todo.list;
        const todoOverview = this.overviews[3];
        todoOverview.value = response.result.todo.count || 0;
        this.overviews.splice(3, 1, todoOverview);

        // 到期的信息
        this.expiredMaterials = response.result.expiring_materials.list;
        const emOverview = this.overviews[2];
        emOverview.value = response.result.expiring_materials.count;
        this.overviews.splice(2, 1, emOverview);

        const clientOverview = this.overviews[0]
        clientOverview.value = response.result.client_count
        this.overviews.splice(0, 1, clientOverview);

        const companyOverview = this.overviews[1]
        companyOverview.value = response.result.company_count
        this.overviews.splice(1, 1, companyOverview);


      } catch (response) {
        this.$message.error('仪表盘数据查询失败:' + response.msg);
      }
    },
    toMaterialDetail(row) {
      const baseUrl = '/customer/detail';
      this.$router.push({ path: baseUrl, query: { id: row.client_id } })
    }
  }
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
